import React from 'react'
import { Row, Col } from 'antd'
import PCUserCenter from './pc_usercenter'
import PCProduct from './pc_product'
import {
    Menu,
    Icon,
    Tabs,
    message,
    Form,
    Input,
    Button,
    Checkbox,
    Modal
} from 'antd'
const FormItem = Form.Item
const TabPane = Tabs.TabPane
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
import { Router, Route, Link, browserHistory } from 'react-router'

class PCHeader extends React.Component {

    constructor() {
        super()
        this.state = {
            current: 'top',
            modalVisble: false,
            action: 'login',
            hasLogined: false,
            userNickName: '',
            userid: 0
        }
    }
    componentWillMount() {
        if (localStorage.userid != '') {
            this.setState({ hasLogined: true })
            this.setState({
                userNickName: localStorage.userNickName,
                userid: localStorage.userid
            })
        }
    }
    handleClick(e) {
        if (e.key == "out") {
            localStorage.userid = ''
            localStorage.userNickName = ''
            this.setState({
                hasLogined: false,
                current: "top"
            })
            message.success("退出成功")
          
        } else if (e.key == "register") {
            this.setState({ current: "register" })
            this.setModalVisble(true)
        } else {
            this.setState({ current:e.key })//此处可有可无 不影响程序运行
        }

    }
    setModalVisble(value) {
        this.setState({ modalVisble: value })
    }
    handleSubmit(e) {
        e.preventDefault()
        const myFetchOptions = {
            method: 'POST'
        }
        const formData = this.props.form.getFieldsValue()
        console.log(formData)

        fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=" + this.state.action + "&username=" + formData.userName + "&password="
            + formData.password + "&r_userName=" + formData.r_userName + "&r_password=" + formData.r_password + "&r_confirmPassword="
            + formData.r_confirmPassword, myFetchOptions).then(response => response.json()).then(json => {
                this.setState({
                    userNickName: formData.userName/*json.NickUserName*/
                    /* userid:json.UserId   */
                })
                localStorage.userid = 1
                //localStorage.userid=json.UserId
                localStorage.userNickName = formData.userName/*json.NickUserName*/
            })
        if (this.state.action == "login") {
            this.setState({ hasLogined: true })
        }
        this.setState({ current: "top" })
        message.success("请求成功")
        this.setModalVisble(false)
    }
    callback(key) {
        if (key == 1) {
            this.setState({ action: 'login' });
        } else if (key == 2) {
            this.setState({ action: 'register' });
        }
    }
    logout() {
        localStorage.userid = ''
        localStorage.userNickName = ''
        this.setState({ hasLogined: false })
    }
    render() {
        const { getFieldDecorator } = this.props.form
        const userShow = this.state.hasLogined
            ? <SubMenu title={<span><Icon type="login" />{this.state.userNickName}</span>} className="register">             
                <Menu.Item key="center">
                    <Link to={`/PCUserCenter`} target="_blank">
                        个人中心
                    </Link>
                </Menu.Item>
                <Menu.Item key="out">退出</Menu.Item>
            </SubMenu>
            : <Menu.Item key="register" className="register">
                <Icon type="login" />注册/登录
            </Menu.Item>
        return (
            <header>
                <Row>
                    <Col span={2}></Col>
                    <Col span={4}>
                        <a href="/" className="logo">
                            <img src="./src/images/news.png" alt="" />
                            <span>ReactNews</span>
                        </a>
                    </Col>
                    <Col span={16}>
                        <Menu
                            onClick={this.handleClick.bind(this)} mode="horizontal" selectedKeys={[this.props.current]}>
                            <Menu.Item key="top">
                                <Link to={`/`}>
                                    <Icon type="appstore" />头条
                                </Link>
                            </Menu.Item>
                            <Menu.Item key="guonei">
                                <Link to={`/PCUserCenter`}>
                                    <Icon type="switcher" />国内
                                </Link>
                            </Menu.Item>
                            <Menu.Item key="guoji">
                                <Link to={`/PCProduct`}>
                                    <Icon type="apple" />国际
                                </Link>
                            </Menu.Item>
                            <SubMenu title={<span><Icon type="android" />军事</span>}>
                                <MenuItemGroup title="国内">
                                    <Menu.Item key="setting:1">Option 1</Menu.Item>
                                    <Menu.Item key="setting:2">Option 2</Menu.Item>
                                </MenuItemGroup>
                                <MenuItemGroup title="国际">
                                    <Menu.Item key="setting:3">Option 3</Menu.Item>
                                    <Menu.Item key="setting:4">Option 4</Menu.Item>
                                </MenuItemGroup>
                            </SubMenu>
                            <Menu.Item key="shehui">
                                <Link>
                                    <Icon type="github" />社会
                                </Link>
                            </Menu.Item>
                            <Menu.Item key="yule">
                                <Icon type="chrome" />娱乐
                            </Menu.Item>
                            {userShow}
                        </Menu>

                        <Modal
                            title="用户中心"
                            wrapClassName="vertical-center-modal"
                            visible={this.state.modalVisble}
                            onCancel={() => this.setModalVisble(false)}
                            onOk={() => this.setModalVisble(false)}
                            okText="关闭">

                            <Tabs type="card" onChange={this.callback.bind(this)}>
                                <TabPane tab="登录" key="1">
                                    <Form layout="horizontal" onSubmit={this.handleSubmit.bind(this)}>
                                        <FormItem label="账户">
                                            {getFieldDecorator('userName', {
                                                rules: [{ required: true, message: '请输入账号!' }],
                                            })(
                                                <Input prefix={<Icon type="user" />} placeholder="请输入账号" />
                                                )}
                                        </FormItem>
                                        <FormItem label="密码">
                                            {getFieldDecorator('password', {
                                                rules: [{ required: true, message: '请输入密码!' }],
                                            })(
                                                <Input prefix={<Icon type="lock" />} placeholder="请输入密码" type="password" />
                                                )}
                                        </FormItem>
                                        <Button type="primary" htmlType="submit">登录</Button>
                                    </Form>
                                </TabPane>

                                <TabPane tab="注册" key="2">
                                    <Form layout="horizontal" onSubmit={this.handleSubmit.bind(this)}>
                                        <FormItem label="账户">
                                            {getFieldDecorator('r_userName', {
                                                rules: [{ required: true, message: '请输入账号!' }],
                                            })(
                                                <Input prefix={<Icon type="user" />} placeholder="请输入账号" />
                                                )}
                                        </FormItem>
                                        <FormItem label="密码">
                                            {getFieldDecorator('r_password', {
                                                rules: [{ required: true, message: '请输入密码!' }],
                                            })(
                                                <Input prefix={<Icon type="lock" />} placeholder="请输入密码" type="password" />
                                                )}
                                        </FormItem>
                                        <FormItem label="确认密码">
                                            {getFieldDecorator('r_confirmPassword', {
                                                rules: [{ required: true, message: '请再次输入密码!' }],
                                            })(
                                                <Input prefix={<Icon type="lock" />} placeholder="请再次输入密码" type="password" />
                                                )}
                                        </FormItem>
                                        <Button type="primary" htmlType="submit">注册</Button>
                                    </Form>
                                </TabPane>
                            </Tabs>
                        </Modal>
                    </Col>
                    <Col span={2}></Col>
                </Row>
            </header>
        )
    }
}
export default PCHeader = Form.create({})(PCHeader)